<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词记忆卡片游戏 - 玩法指南</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        .guide-section {
            margin-bottom: 40px;
            padding: 20px;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 10px 30px rgba(0, 62, 128, 0.1);
        }
        
        .guide-section h2 {
            color: #0d6efd;
            margin-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
        }
        
        .guide-section h3 {
            color: #198754;
            margin-top: 25px;
            margin-bottom: 15px;
        }
        
        .guide-img {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }
        
        .key-feature {
            background-color: #f8f9fa;
            border-left: 4px solid #0d6efd;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 10px 10px 0;
        }
        
        .game-mode-card {
            margin-bottom: 20px;
        }
        
        .shortcut-table {
            width: 100%;
            margin: 20px 0;
        }
        
        .shortcut-table th {
            background-color: #0d6efd;
            color: white;
        }
        
        .tip-box {
            background-color: #e8f4f8;
            border-left: 4px solid #17a2b8;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 10px 10px 0;
        }
        
        .warning-box {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 10px 10px 0;
        }
        
        .back-to-game {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <!-- Canvas背景 -->
    <canvas id="canvas-background"></canvas>
    
    <div class="container my-5">
        <header class="text-center mb-5">
            <h1 class="display-4 fw-bold">单词记忆卡片游戏 - 玩法指南</h1>
            <p class="lead">掌握游戏规则，高效学习英语单词</p>
        </header>
        
        <div class="guide-section">
            <h2><i class="fas fa-info-circle me-2"></i>游戏简介</h2>
            <p>单词记忆卡片游戏是一款专为英语学习者设计的记忆辅助工具。通过不同的游戏模式和分类方式，用户可以有效地学习和记忆英语单词。游戏采用科学的间隔重复记忆方法，帮助用户更快、更牢固地掌握单词。</p>
            
            <div class="key-feature">
                <h4><i class="fas fa-star me-2"></i>核心特点</h4>
                <ul>
                    <li>多种分类方式：按难度和主题分类单词</li>
                    <li>三种游戏模式：记忆闯关、单词挑战、错误单词复习</li>
                    <li>智能学习进度跟踪：记录已掌握和学习中的单词</li>
                    <li>本地数据存储：保存学习进度，随时继续学习</li>
                    <li>精美界面和动画效果：提供愉悦的学习体验</li>
                </ul>
            </div>
        </div>
        
        <div class="guide-section">
            <h2><i class="fas fa-gamepad me-2"></i>游戏模式</h2>
            
            <div class="row">
                <div class="col-md-4">
                    <div class="card game-mode-card">
                        <div class="card-body text-center">
                            <h3 class="card-title">单词记忆闯关</h3>
                            <p class="card-text">按照难度逐步学习单词，通过翻转卡片记忆单词的含义。</p>
                            <div class="text-center">
                                <i class="fas fa-brain fa-3x text-primary mb-3"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card game-mode-card">
                        <div class="card-body text-center">
                            <h3 class="card-title">单词挑战</h3>
                            <p class="card-text">根据中文提示输入对应的英文单词，测试掌握程度。</p>
                            <div class="text-center">
                                <i class="fas fa-trophy fa-3x text-warning mb-3"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card game-mode-card">
                        <div class="card-body text-center">
                            <h3 class="card-title">错误单词复习</h3>
                            <p class="card-text">重点复习之前标记为"不认识"的单词，巩固薄弱环节。</p>
                            <div class="text-center">
                                <i class="fas fa-sync-alt fa-3x text-success mb-3"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <h3>单词记忆闯关模式详解</h3>
            <p>在这个模式中，你将逐个学习单词。每次显示一张单词卡片，正面是英文单词和音标，背面是中文翻译和例句。</p>
            <ol>
                <li><strong>查看单词</strong>：首先看到英文单词和音标</li>
                <li><strong>翻转卡片</strong>：点击卡片查看中文翻译和例句</li>
                <li><strong>标记熟悉度</strong>：选择"认识"或"不认识"来记录你的学习进度</li>
                <li><strong>继续学习</strong>：系统会根据你的选择调整单词出现的频率</li>
            </ol>
            
            <div class="tip-box">
                <p><i class="fas fa-lightbulb me-2"></i><strong>学习技巧</strong>：尝试在翻转卡片前回忆单词的含义，这样可以增强记忆效果。</p>
            </div>
            
            <h3>单词挑战模式详解</h3>
            <p>这个模式会测试你对单词的掌握程度。系统会显示单词的中文翻译，你需要输入对应的英文单词。</p>
            <ol>
                <li><strong>查看提示</strong>：系统显示单词的中文翻译</li>
                <li><strong>输入答案</strong>：在输入框中输入对应的英文单词</li>
                <li><strong>检查答案</strong>：点击"检查答案"按钮或按回车键</li>
                <li><strong>查看结果</strong>：系统会显示你的答案是否正确，并给出正确答案</li>
            </ol>
            
            <div class="tip-box">
                <p><i class="fas fa-lightbulb me-2"></i><strong>学习技巧</strong>：注意单词的拼写，包括大小写和标点符号。系统会严格匹配你的输入。</p>
            </div>
            
            <h3>错误单词复习模式详解</h3>
            <p>这个模式专注于你之前标记为"不认识"的单词，帮助你巩固薄弱环节。</p>
            <ol>
                <li><strong>筛选单词</strong>：系统会自动筛选出你之前标记为"不认识"的单词</li>
                <li><strong>重点复习</strong>：使用与记忆闯关模式相同的方式学习这些单词</li>
                <li><strong>重新评估</strong>：再次选择"认识"或"不认识"来更新你的学习进度</li>
            </ol>
            
            <div class="warning-box">
                <p><i class="fas fa-exclamation-triangle me-2"></i><strong>注意</strong>：如果没有标记为"不认识"的单词，系统会使用所有未掌握的单词。</p>
            </div>
        </div>
        
        <div class="guide-section">
            <h2><i class="fas fa-layer-group me-2"></i>单词分类</h2>
            
            <h3>按难度分类</h3>
            <p>单词按照难度级别分为四个等级，从简单到困难：</p>
            <ul>
                <li><strong>入门100个常用单词</strong>：最基础、最常用的英语单词，适合初学者</li>
                <li><strong>常用500个单词</strong>：日常生活中经常使用的单词，适合有一定基础的学习者</li>
                <li><strong>日常1000个单词</strong>：涵盖日常交流所需的大部分单词，适合中级学习者</li>
                <li><strong>四级4000个单词</strong>：大学英语四级考试词汇，适合高级学习者</li>
            </ul>
            
            <h3>按主题分类</h3>
            <p>单词按照不同的主题和场景分类，便于情境化学习：</p>
            <div class="row">
                <div class="col-md-4">
                    <ul>
                        <li><strong>动物</strong>：78张卡片</li>
                        <li><strong>交通与地点</strong>：72张卡片</li>
                        <li><strong>身体与服装</strong>：72张卡片</li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul>
                        <li><strong>时间数字颜色</strong>：71张卡片</li>
                        <li><strong>蔬果</strong>：46张卡片</li>
                        <li><strong>我的家</strong>：69张卡片</li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul>
                        <li><strong>形容词与动词</strong>：175张卡片</li>
                        <li><strong>学校</strong>：44张卡片</li>
                        <li><strong>运动与爱好</strong>：42张卡片</li>
                    </ul>
                </div>
            </div>
            
            <div class="tip-box">
                <p><i class="fas fa-lightbulb me-2"></i><strong>学习建议</strong>：建议初学者从"入门100个常用单词"开始，或者选择感兴趣的主题进行学习。</p>
            </div>
        </div>
        
        <div class="guide-section">
            <h2><i class="fas fa-keyboard me-2"></i>操作指南</h2>
            
            <h3>基本操作</h3>
            <ol>
                <li><strong>选择分类</strong>：点击左侧的难度分类或右侧的主题分类卡片</li>
                <li><strong>选择游戏模式</strong>：点击"单词记忆闯关"、"单词挑战"或"错误单词复习"按钮</li>
                <li><strong>开始游戏</strong>：点击对应游戏模式下的"开始游戏"按钮</li>
                <li><strong>查看进度</strong>：在页面底部的"学习进度"区域查看已掌握、学习中和未学习的单词数量</li>
                <li><strong>重置进度</strong>：点击"重置学习进度"按钮可以清除所有学习记录（谨慎使用）</li>
            </ol>
            
            <h3>游戏中的操作</h3>
            <p><strong>记忆闯关模式：</strong></p>
            <ul>
                <li>点击卡片翻转查看翻译</li>
                <li>点击"认识"按钮标记为已学会</li>
                <li>点击"不认识"按钮标记为需要复习</li>
                <li>点击"下一个"按钮进入下一个单词</li>
            </ul>
            
            <p><strong>单词挑战模式：</strong></p>
            <ul>
                <li>在输入框中输入英文单词</li>
                <li>点击"检查答案"按钮或按回车键提交答案</li>
                <li>系统会自动显示结果并在短暂延迟后进入下一个单词</li>
            </ul>
            
            <h3>键盘快捷键</h3>
            <table class="table table-striped shortcut-table">
                <thead>
                    <tr>
                        <th>按键</th>
                        <th>功能</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><kbd>空格键</kbd></td>
                        <td>翻转卡片或进入下一个单词</td>
                    </tr>
                    <tr>
                        <td><kbd>→</kbd> (右箭头)</td>
                        <td>标记为"认识"或检查答案</td>
                    </tr>
                    <tr>
                        <td><kbd>←</kbd> (左箭头)</td>
                        <td>标记为"不认识"</td>
                    </tr>
                    <tr>
                        <td><kbd>Enter</kbd> (回车键)</td>
                        <td>在挑战模式中检查答案</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="guide-section">
            <h2><i class="fas fa-chart-line me-2"></i>学习进度</h2>
            
            <h3>进度跟踪</h3>
            <p>系统会自动跟踪你的学习进度，将单词分为三种状态：</p>
            <ul>
                <li><strong>已掌握单词</strong>：连续多次标记为"认识"的单词，这些单词将减少出现频率</li>
                <li><strong>学习中单词</strong>：正在学习但尚未完全掌握的单词</li>
                <li><strong>未学习单词</strong>：尚未开始学习的单词</li>
            </ul>
            
            <h3>掌握标准</h3>
            <p>系统根据以下标准判断单词是否已掌握：</p>
            <ul>
                <li>至少学习过3次</li>
                <li>正确率达到80%以上</li>
            </ul>
            
            <div class="warning-box">
                <p><i class="fas fa-exclamation-triangle me-2"></i><strong>注意</strong>：重置学习进度将删除所有学习记录，所有单词将恢复到未学习状态。</p>
            </div>
        </div>
        
        <div class="guide-section">
            <h2><i class="fas fa-lightbulb me-2"></i>学习技巧</h2>
            
            <h3>高效学习方法</h3>
            <ol>
                <li><strong>每日固定时间学习</strong>：养成每天固定时间学习的习惯，比如早晨或睡前</li>
                <li><strong>分批学习</strong>：每次学习10-20个新单词，避免一次学习过多</li>
                <li><strong>多种感官参与</strong>：看到单词时尝试大声朗读，增强记忆效果</li>
                <li><strong>情境联想</strong>：将单词与实际场景联系起来，创建记忆链接</li>
                <li><strong>定期复习</strong>：使用"错误单词复习"模式定期巩固薄弱环节</li>
            </ol>
            
            <h3>推荐学习路径</h3>
            <p>对于初学者：</p>
            <ol>
                <li>从"入门100个常用单词"开始</li>
                <li>使用"单词记忆闯关"模式熟悉单词</li>
                <li>使用"单词挑战"模式测试掌握程度</li>
                <li>使用"错误单词复习"模式巩固薄弱环节</li>
                <li>逐步过渡到更高难度的单词集</li>
            </ol>
            
            <p>对于中级学习者：</p>
            <ol>
                <li>选择感兴趣的主题分类</li>
                <li>结合"单词挑战"和"错误单词复习"模式</li>
                <li>尝试在日常生活中使用学到的单词</li>
            </ol>
            
            <div class="tip-box">
                <p><i class="fas fa-lightbulb me-2"></i><strong>记忆窍门</strong>：使用间隔重复法，即在不同的时间间隔（如1天后、3天后、1周后）复习同一个单词，这样可以显著提高记忆效果。</p>
            </div>
        </div>
    </div>
    
    <a href="index.html" class="btn btn-primary btn-lg back-to-game">
        <i class="fas fa-arrow-left me-2"></i>返回游戏
    </a>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Canvas背景 -->
    <script src="js/canvas-background.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化Canvas背景
            try {
                const canvasBackground = new CanvasBackground();
            } catch (error) {
                console.error("Canvas背景初始化失败:", error);
            }
        });
    </script>
</body>
</html>
